
<template>
   <view class="page">
    <view class="head">
      <view class="head-icon"> </view>
      <view class="head-info">  公告信息:</view>
    </view>

    <view class="list-head">
      <view class="title"> 预约信息 </view>
      <view class="list-titles flex">
        <view class="lt"> 单号 </view>
        <view class="lt"> 预约人 </view>
        <view class="lt"> 看房时间 </view>
        <view class="lt"> 发布时间 </view>
      </view>
    </view>
    <view class="list">
      <view class="item flex" v-for="(item,index) in list " :key="index">
        <view class="lt no"> 123455 </view>
        <view class="lt"> <view class="man"> </view>
        </view>
        <view class="lt times"> 2021/11/11 11:11 </view>
        <view class="lt times"> 2021/11/11 11:11 </view>
      </view>
    </view>
    <view class="appPng-warp"> 
      <view class="appPng"> </view>
    </view>
  </view>
</template>
<script> 
export default { 
  data() {
    return {
       list: new Array(10).fill(0)
    };
  },
  mounted() {},
  methods: {
    doList() {},
  },
};
</script>  

<style> 

.head {
  background:#FBD100;
  border-bottom: 10px solid #DFDFDF;
  padding: 10px ;
}

.head-icon{
 margin-left:10px;
 width: 40px;
 height: 40px;
 border-radius: 50%; 
 background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/top1.png) center center / 100% 100%;
}

.head-info{
 position: relative;
 background: #fff; 
 height: 100px;
 margin-top: 10px;
 border-radius: 10px;
 padding: 10px;
}

.head-info:before{
  content:"";
  border:10px solid transparent;
  border-bottom-color:#fff;
  position:absolute;
  left:20px;
  top:0;
  margin-top:-20px; 
}
.head-info:after{
  content:"";
  border:10px solid transparent;
  border-bottom-color:white;
  position: absolute;
  top:0;
  left:20px;
  margin-top:-19px;
}
.title{
  padding: 0 10px;
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0;
}
.list-head{
 padding: 0 2px;
}


.list {
 padding: 0 2px;
 flex: 1;
 overflow: auto;
} 
.list-titles {
 font-size: 18px;
}
.item{
 align-items: center;
 margin: 10px 0;
border-bottom: 1px solid #DFDFDF;
padding:10px 2px ;
 
}
.lt {
 flex: 1;
 display: flex;
 justify-content: center;
}
.no {
 color: #fff100;
}
.times{
 color: #DFDFDF;
}
.man {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 flex-shrink: 0;
 background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
} 
</style>